<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			#graph1{
				//width: 1000px;
				height: 300px;
				margin-left: 1px;
				margin-right: 1px;
				
			}
			
						
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">停车场监管</h1> 
		</header>
		<div class="mui-content">
			
			<div style="height:55%;" class="mui-scroll-wrapper mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll" style="height: 50%;">
					<!--这里放置真实显示的DOM内容-->
					<div id="graph1"></div>
				</div>
			</div>
			
			<br />
			<ul class="mui-table-view mui-table-view-chevron" id="lists"> 
			 
			</ul>
		</div>
		
		
<script src="js/mui.min.js"></script>
<script src="js/echarts.js"></script>
	<script>
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			mui.ajax({
				url:"http://118.24.14.224/carStation/getCost.php",
				data:{
					"sName":"test"
				},
				async: true,
				type:'post',
				dataType:'json',
				timeout:10000,
				success:function(data){ 
					anData(data);
				},
				error:function(xhr,type,errorThrown){						
					mui.alert("error"+type);
				}
			});
			
			function anData(data){
				//data = JSON.parse(data);
				var ul = document.getElementById("lists");
				var xindex = [];
				var amount = [];
				var price = [];
				var cost = [];
				var i = 0;
				for(i in data){
					var li = document.createElement("li"); 
					li.setAttribute("class","mui-table-view-cell ");
					var a = document.createElement("a");
					a.setAttribute("class","mui-navigate-right");
					
					var str = data[i].station_name;
					a.innerHTML = str;
					li.setAttribute("sname",str);
					li.appendChild(a);
					ul.appendChild(li);
					xindex[i] = data[i].station_name;
					amount[i] = data[i].s_amount;
					price[i] = data[i].s_price;
					cost[i] = data[i].cost;
				}
				var myChart = document.getElementById('graph1');
				i = cost.length;
				myChart.style.width = i*250+"px";
				initIndexGraph(xindex,amount,price,cost);  
			}
			
			mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
				  //获取id
				  var sname = this.getAttribute("sname");  
				  localStorage.setItem("sname",sname);
				  mui.openWindow({
					url: 'station_info.html',
					id: 'station_info',
					show: {
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				});
				  
			}) 
			
			function initIndexGraph(xindex,amount,price,cost){
			   var myChart = echarts.init(document.getElementById('graph1'));
		       option = {
				    title : {
				        text: '停车场营收监管',
				        subtext: '按每个停车场划分'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:[
				            '总车位','单价','营收',''
				        ]
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    grid: {y: 70, y2:30, x2:20},
				    xAxis : [
				        {
				            type : 'category',
				            data : xindex
				        },
				        {
				            type : 'category',
				            axisLine: {show:false},
				            axisTick: {show:false},				        
				            data : xindex
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel:{formatter:'{value}'}
				        }
				    ],
				    series : [
				        {
				            name:'总车位',
				            type:'bar',
				            itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true}}},
				            data:amount
				        },
				        {
				            name:'单价',
				            type:'bar',
				            itemStyle: {normal: {color:'rgba(252,206,16,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
				            data:price
				        },
				        {
				            name:'营收',
				            type:'bar',
				            itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},
				            data:cost
				        },
    				]
			};     
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
			}
	</script>
	</body>

</html>